<h4>模板驱动的使用</h4>
将表单转化为angular表单
import &gt; FormsModule &lt; from '@angular/forms';
<form #form="ngForm" (submit)="onSubmit(form)">
    <input type="text" name="username" ngModel>
    <button>提交</button>
</form>
<h4>表单分组</h4>
<form #form1="ngForm" (submit)="onSubmit1(form1)">
    用户名：
    <ng-container ngModelGroup="user">
        <input type="text" name="username" ngModel>
    </ng-container>
    手机号：
    <ng-container ngModelGroup="contact">
        <input type="text" name="phone" ngModel>
    </ng-container>
    <button>提交</button>
</form>
<h4>表单验证</h4>
<form #form2="ngForm" (submit)="onSubmit2(form2)">
    用户名：
    <ng-container ngModelGroup="user">
        <input type="text" name="username" #username="ngModel" ngModel required pattern="\d{1,}" minlength="2" maxlength="6">
        <div *ngIf="username.touched && username.invalid && username.errors">
            <div *ngIf="username.errors?.['required']">请输入用户名</div>
            <div *ngIf="username.errors?.['minlength']">不能少于{{username.errors?.['minlength']?.["requiredLength"]}}个字符</div>
            <div *ngIf="username.errors?.['maxlength']">不能多于{{username.errors?.['maxlength']?.["requiredLength"]}}个字符</div>
        </div>
    </ng-container>
    <br/>
    手机号：
    <ng-container ngModelGroup="contact">
        <input type="text" name="phone"  ngModel required pattern="\d{1,}">
    </ng-container>
    <button type="submit" [disabled]="form2.invalid">提交</button>
</form>
<h4>模型驱动的使用</h4>
<form [formGroup]="contactFrom" (submit)="onSubmit3()">
    <div formGroupName="fullName">
        <label for="firstname">姓:</label>
        <input type="text" id="firstname" formControlName="firstName"><br/>
        <label for="lastname">名:</label>
        <input type="text" id="lastname" formControlName="lastName"><br/>
    </div>
    <input type="text" formControlName="phone"><br/>
    <button type="submit">提交</button>
</form>
<h4>FormArray</h4>
<form [formGroup]="familyFrom" (submit)="onSubmit4()">
    <div formArrayName="persons">
        <div *ngFor="let person of persons.controls;let i = index" [formGroupName]="i">
            <input type="text" formControlName="relation"><br>
            <input type="text" formControlName="name"><br>
            <input type="text" formControlName="phone"><br>
        <button (click)="removePerson(i)">删除成员</button>
        </div>
    </div>
    <button (click)="addPerson()">添加成员</button>
    <button type="submit">提交</button>
</form>
<style>
    input.ng-touched.ng-invalid {
        outline: 2px solid red;
    }
</style>